<template>
	<view class="modal">
		<view class="modal_bg">
			<image class="logo" src="/static/logo.png"></image>
			<view class="modal_title">修改用户信息</view>
			<view class="modal_content">
				<image class="alert" src="/static/icon-alert.png" mode="aspectFill"></image>
				<text class="alert-text">点击获取头像及昵称</text>
				
				<button :plain="true" class="avatarWx" open-type="chooseAvatar" @chooseavatar='chooseavatar'>
					<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
				</button>
				<input id="nickName" type="nickname" class="nickName" placeholder="请输入昵称" v-model="username"/>	
			</view>
			<view class="modal_btn">
				<button @click="save" class="okBtn">确定</button>
			</view>

		</view>

	</view>
</template>

<script>
import { config } from '../utils/utils';
import { updateUserInfo } from '/api/index.js'
	export default {
		name: "updateInfo",
		props:{
			userInfo: Object
		},
		watch:{
				userInfo: { 
						handler(value) {
							  console.log('userInfo===',value)
								this.avatarUrl = value.avatar;
								this.username = value.username;
								this.openId = value.openId;
						}, 
						immediate: true,//设置为 true 时，第一次进入页面时即监听
						deep: true ,// 深度监听父组件传过来对象变化 
				}
		},
		data() {
			return {
				openId: '',
				avatarUrl: '',
				username: '',
			}
		},
		methods: {
			cancel() {
				this.$emit('close')
			},
			
			save() {
				// console.log("nickName===",this.nickName);
				console.log("avatar===",this.avatarUrl)
				
				let that = this;
				//昵称组件在input失去焦点时响应 故通过查询对象实例的方式获取
				uni.createSelectorQuery().in(this)
				    .select("#nickName")
				    .fields({
				        properties: ["value"],
				    })
				    .exec((res) => {  
				        // const nickName = res?.[0]?.value  
								that.username = res?.[0]?.value;
				        console.log('获取昵称', that.username)
								if(!that.username) {
									uni.showToast({
										title: '请填写昵称',
										icon: 'error'
									})
									return;
								}
								//模拟openId 用户唯一标识
								// let openId = 'ohiEf7bgqUWKczueyF_qp-nNuRes';
								let userInfo = uni.getStorageSync(config.userInfo);
								console.log("userInfo====",userInfo);
								// return;
								let param = {
									nickName: that.username,
									avatarUrl: that.avatarUrl,
									openId: userInfo.openid,
								}
								updateUserInfo(param).then(res=>{
									uni.showToast({
										title:"更新成功",
										icon: 'success'
									})
									var userResult = JSON.parse(JSON.stringify(that.userInfo));
									userResult.avatar = that.avatarUrl;
									userResult.username = that.username;
									this.$emit('saveUserInfo',userResult);
								})
				    })
					
			},
			chooseavatar(e) {
				let that = this
				console.log("e====",e)
				let { avatarUrl } = e.detail;
				// this.avatarUrl = avatarUrl;
				
				uni.uploadFile({
					url:'https://trip.chinahood.net/api/Upfiles/pic', // 后台上传接口
					filePath: avatarUrl, // 上传图片 url
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
						// 'Authorization':uni.getStorageSync('token')
					},
					success(res) {
						let data = JSON.parse(res.data);
						that.avatarUrl = decodeURI(data.url);
						console.log(that.avatarUrl)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.modal {
		.modal_bg {
			border-radius: 20rpx;
			text-align: center;
			position: relative;
			display: flex;
			flex-direction: column;
			.close {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
			.modal_title {
				width: 100%;
				border-bottom: 2rpx solid #eff1f4;
				font-size: 36rpx;
			}

			.modal_content {
				display: flex;
				flex-direction: column;
				align-items: center;
				border-bottom: 2rpx solid #eff1f4;
				padding: 0 40rpx;
				.alert {
					margin-top: 30rpx;
					width: 54rpx;
					height: 54rpx;
				}
				.alert-text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #999999;
				}
				.avatarWx{
					margin-top: 110rpx;
					width: 120rpx;
					height: 120rpx;
					padding: 0;
					border: none;
					color: #fff;
					border-radius: 50%;
					background: #CCCCCC;
				}
				.nickName {
					width: 650rpx;
					height: 60rpx;
					margin-top: 30rpx;
					color: #000000;
					text-align: center;
					padding:0 24rpx;
					border-radius: 10rpx;
					background: transparent;
					border: 1px solid #000000;
					font-size: 24rpx;
					text-align: center;
				}
				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.modal_btn {
				margin-top: 130rpx;
				height: 80rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				.okBtn {
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgb(6, 193, 96);
					color: #ffffff;
					border-radius: 10rpx;
					width: 360rpx;
					height: 80rpx;
					font-size: 34rpx;
					margin: 0;
					padding: 0;				
				}
		
			}
		}
	}
</style>

